The Text Tool in Figma is an essential design tool used to create, edit, format, and manage text within UI/UX designs. Designers use it for headings, paragraphs, labels, buttons, navigation items, forms, cards, captions, notifications, links, and other textual content.
Typography is an important part of interface design because text communicates information, establishes visual hierarchy, improves readability, and helps users understand how to interact with an interface. Figma provides controls for font family, font weight, font size, line height, letter spacing, alignment, text resizing, decoration, lists, OpenType features, and text styles.
The Text Tool can be selected from the toolbar or activated using the T keyboard shortcut. Figma provides different ways to create text layers, including clicking to create an automatically resizing text layer and clicking and dragging to create a text layer with defined dimensions.
For structured Figma and UI/UX learning, visit JustAcademy Figma Training and explore the course through Register for Figma Course Demo.
The Text Tool is a Figma design tool used to add textual content to a canvas. Every piece of text created with the Text Tool becomes a text layer that can be edited and styled independently or as part of a larger interface.
Text layers can contain anything from a single word or button label to complete paragraphs and long-form content. Designers can customize typography and layout properties to match the visual language of a product.
Text Tool
↓
Create Text Layer
↓
Enter Text Content
↓
Choose Font
↓
Set Size and Weight
↓
Adjust Line Height
↓
Adjust Letter Spacing
↓
Set Alignment
↓
Apply Text Style
↓
Use in UI Design
The Text Tool is important because almost every digital interface contains textual information. Buttons, menus, headings, labels, descriptions, forms, error messages, product information, and navigation elements all depend on typography.
The Text Tool is available in the Figma toolbar. It can also be activated using the keyboard shortcut T. Once selected, you can click on the canvas or click and drag to create a text layer.
Figma Toolbar
↓
Text Tool
↓
Press T
↓
Click Canvas
↓
Type Text
| Action | Shortcut | Purpose |
|---|---|---|
| Text Tool | T | Create a new text layer |
| Move Tool | V | Select and move objects |
| Edit Selected Text | Enter | Edit the content of a selected text layer |
| Bold | Cmd/Ctrl + B | Apply bold formatting where supported |
| Italic | Cmd/Ctrl + I | Apply italic formatting where supported |
| Underline | Cmd/Ctrl + U | Apply underline formatting |
The primary shortcut for creating a text layer is T. When a text layer is selected, pressing Enter can be used to edit its content.
The first method is to select the Text Tool and click once on the canvas. Figma creates an automatically resizing text layer. This type of text layer expands horizontally as text is added.
Select Text Tool
↓
Click Canvas
↓
Type "Welcome"
↓
Text Layer Created
↓
Text Expands Automatically
The second method is to click and drag with the Text Tool. This creates a text layer with defined dimensions. Longer text can wrap to additional lines within the defined text area.
Click + Drag
┌─────────────────────┐
│ This is a text box │
│ containing multiple │
│ lines of content. │
└─────────────────────┘
When you click once to create text, the text layer uses an automatically resizing width. As you type more content, the text layer can grow horizontally.
| Property | Auto Width |
|---|---|
| Width | Grows with text |
| Line Wrapping | Generally does not wrap based on a fixed width |
| Best For | Short labels, buttons, titles, navigation items |
| Example | Login, Search, Profile |
Fixed-size text is useful when the text must stay within a specific area. It is commonly used for paragraphs, descriptions, cards, articles, and content blocks.
| Property | Fixed Size |
|---|---|
| Width | Defined by the text box |
| Wrapping | Text wraps within the available area |
| Best For | Paragraphs, descriptions, content sections |
| Example | Product description |
Text resizing determines how a text layer behaves when its content or dimensions change. Choosing the correct resizing behavior is important for responsive UI layouts.
| Mode | Purpose | Typical Use |
|---|---|---|
| Auto Width | Text expands horizontally | Short labels and buttons |
| Auto Height | Width remains constrained while height adapts | Paragraphs and descriptions |
| Fixed Size | Width and height remain controlled | Specific layout regions |
Text content can be edited at any time. Double-click a text layer or press Enter with the text layer selected to enter text editing mode. You can then type, delete, replace, or paste content.
Original:
Welcome User
Edit:
Welcome Manish
Final:
Welcome Back!
Figma allows designers to select individual characters, words, or portions of text inside a text layer and apply formatting to only the selected content.
Welcome to Figma Design
Select:
Figma
Apply:
Bold + Different Color
Result:
Welcome to Figma Design
This capability is useful for highlighting important words, links, labels, and emphasized content.
Font family determines the visual design of characters in a text layer. Figma provides access to available fonts, including fonts provided through its font library, installed fonts, and fonts shared by organizations depending on the setup and plan.
When selecting a font, consider readability, brand personality, platform requirements, and consistency.
Figma's font picker can be used to search and filter available fonts.
Font weight controls how thick or visually heavy the characters appear. Different fonts provide different weight options.
| Weight | Typical Use |
|---|---|
| Light | Subtle secondary content |
| Regular | Body text |
| Medium | Labels and supporting headings |
| Semibold | Important headings and buttons |
| Bold | Strong headings and emphasis |
| Extra Bold | Display typography and strong visual emphasis |
Font size controls the visual scale of text. Designers should select sizes according to hierarchy, readability, device size, and the purpose of the content.
| Text Type | Example Size | Typical Purpose |
|---|---|---|
| Display | 40px+ | Hero sections |
| Heading | 24px–36px | Page and section headings |
| Body | 14px–18px | Paragraphs and descriptions |
| Caption | 11px–13px | Supporting information |
| Button | 14px–16px | Interactive controls |
These values are examples rather than universal rules. The appropriate size depends on the product, platform, font, and design system.
Line height controls the vertical distance between lines of text. It is particularly important for paragraphs and multi-line content because insufficient or excessive line spacing can affect readability.
Line 1: This is a paragraph.
↓ Line Height
Line 2: This is the second line.
↓ Line Height
Line 3: This is the third line.
Figma provides line-height controls in the Typography section.
Letter spacing controls the horizontal space between individual characters. It can be useful for headings, uppercase labels, navigation items, and display typography.
Normal:
DESIGN
Increased Letter Spacing:
D E S I G N
Letter spacing can also be included in reusable text styles.
Paragraph spacing controls the amount of space between paragraphs. It helps organize longer text content and create clear visual separation.
Paragraph One
Lorem ipsum dolor sit amet.
Paragraph Two
Lorem ipsum dolor sit amet.
Paragraph spacing and indentation can be included in Figma text styles.
Text alignment determines how text is positioned horizontally inside its text box. Figma provides common horizontal alignment options such as left, center, right, and justified alignment.
| Alignment | Typical Use |
|---|---|
| Left | Body text, descriptions, forms |
| Center | Hero headings, empty states, centered cards |
| Right | Numbers, specific dashboard layouts |
| Justify | Some long-form editorial layouts |
Vertical alignment determines how text sits vertically inside its text box. Depending on the layout, text can be aligned toward the top, middle, or other available vertical positions.
┌─────────────────────┐
│ Top │
│ │
│ │
└─────────────────────┘
┌─────────────────────┐
│ │
│ Middle │
│ │
└─────────────────────┘
Text decoration changes the visual treatment of text. Common options include underline and strikethrough.
| Decoration | Use |
|---|---|
| None | Normal text |
| Underline | Links and emphasized text |
| Strikethrough | Removed, outdated, or completed content |
Text case controls how characters are displayed. Common transformations include uppercase, lowercase, capitalization, and small caps where supported.
| Case | Example |
|---|---|
| Original | Welcome to Figma |
| Uppercase | WELCOME TO FIGMA |
| Lowercase | welcome to figma |
| Capitalize | Welcome To Figma |
| Small Caps | Wᴇʟᴄᴏᴍᴇ Tᴏ Fɪɢᴍᴀ |
The Fill property controls the color or visual fill of the text. A text layer can use a solid color and supported fill types such as gradients or images depending on the design context.
Text Layer
↓
Fill Property
↓
Solid / Gradient / Image
↓
Styled Text
Applying a fill directly to a text layer changes the text color or appearance. A background behind the text should instead be created using an appropriate frame or container.
Stroke can add an outline around text characters. It can be useful for decorative headings, display typography, logos, and special visual effects.
Normal Text
HELLO
With Stroke
H E L L O
Outline + Fill
Use text strokes carefully because heavy outlines can reduce readability, especially at smaller sizes.
Text layers can also be combined with visual effects where appropriate. Effects can include shadows, blur, and other supported visual treatments.
Effects should support readability and hierarchy rather than unnecessarily decorating every text layer.
Figma supports creating text that follows the path of a vector object. This can be used for curved labels, circular typography, decorative designs, badges, and creative layouts.
Create Vector Path
↓
Select Text on Path
↓
Hover Over Path
↓
Click Path
↓
Type Text
↓
Adjust Text Position
Text can follow curves, circles, and other custom vector paths.
Text on a circular path is useful for badges, seals, logos, stickers, and decorative UI graphics.
TEXT TEXT
/ \
/ \
| CIRCLE |
\ /
\_____________/
After creating the text on the path, the text position and orientation can be adjusted through the available text controls.
Figma allows hyperlinks to be added to text. This is useful for prototypes, design documentation, references, website designs, and interactive content.
Text:
Visit our website
Selected:
website
Add Link:
https://example.com
Result:
Visit our website
Figma text supports bulleted lists, which are useful for feature lists, product descriptions, documentation, and content layouts.
Features:
• Fast performance
• Responsive design
• Easy navigation
• Secure platform
Numbered lists are useful when information must be presented in a specific sequence, such as instructions, workflows, onboarding steps, and tutorials.
How to Register:
1. Open the website
2. Create an account
3. Verify your email
4. Complete your profile
Text styles are reusable collections of typography properties. They help maintain consistent typography across a design and reduce repetitive formatting work.
Figma text styles can include properties such as font family, weight, size, line height, letter spacing, paragraph spacing, indentation, decoration, text case, lists, and OpenType features.
Text Style
↓
Font Family
↓
Weight
↓
Size
↓
Line Height
↓
Letter Spacing
↓
Apply to Text Layers
Figma allows text styles to be created from existing text layers and reused throughout a file.
Consistent naming makes typography systems easier to understand and maintain.
| Style Name | Purpose |
|---|---|
| Display/Large | Large hero text |
| Heading/H1 | Main page heading |
| Heading/H2 | Section heading |
| Body/Regular | Standard paragraph text |
| Body/Small | Secondary information |
| Label/Medium | Form and UI labels |
| Button/Medium | Button text |
| Caption/Small | Supporting information |
Text styles are an important part of a design system because they create consistency across screens and components. A well-defined typography system allows designers to reuse the same hierarchy throughout an application.
Typography System
↓
Display
↓
Headings
↓
Body
↓
Labels
↓
Captions
↓
Buttons
Consistent typography patterns make designs easier to scale across applications and devices.
Text styles can be shared through libraries when the appropriate file and team setup allows it. This enables teams to reuse typography definitions across multiple design files.
Library File
↓
Publish Text Styles
↓
Team Members
↓
Use Shared Styles
↓
Consistent Typography
Figma provides access to OpenType features through type settings. These features can change how specific characters, numerals, ligatures, or stylistic alternatives are displayed.
Available features depend on the selected font.
Variable fonts can provide adjustable typographic characteristics within a single font family. Depending on the font, variable axes can provide additional control over characteristics such as weight or width.
Variable Font
↓
Font Family
↓
Variable Axes
↓
Adjust Typography
↓
Custom Text Appearance
Figma provides variable font controls when the selected font supports them.
Text hierarchy helps users understand the importance and relationship of information. A clear hierarchy makes interfaces easier to scan and understand.
| Level | Example | Purpose |
|---|---|---|
| Display | Welcome to Our Platform | Primary visual statement |
| H1 | Dashboard | Page title |
| H2 | Recent Activity | Section title |
| Body | Your recent transactions... | Main information |
| Caption | Updated 5 minutes ago | Supporting information |
Typography affects readability, hierarchy, usability, branding, and accessibility. Designers should select fonts and text sizes based on the role of the content and the context in which users will read it.
Button labels should be short, clear, and action-oriented. The Text Tool is used to create the label and then position it inside a button container.
Button Frame
┌─────────────────────┐
│ Get Started │
└─────────────────────┘
↑
Text Layer
Text layers are commonly used for form labels, helper text, placeholders, validation messages, and instructions.
Email Address
┌──────────────────────────┐
│ Enter your email │
└──────────────────────────┘
Please use a valid email address.
| Text Element | Purpose |
|---|---|
| Label | Identifies the input |
| Placeholder | Provides an example or prompt |
| Helper Text | Provides additional guidance |
| Error Text | Explains a validation problem |
| Success Text | Confirms successful completion |
Navigation menus frequently use text layers for page names and interactive destinations.
Home | Products | Services | About | ContactNavigation typography should maintain clear hierarchy and sufficient visual distinction between active and inactive states.
Cards commonly contain several text layers such as titles, descriptions, metadata, prices, and actions.
┌────────────────────────────┐
│ Product Name │
│ │
│ Short product description │
│ │
│ ₹1,999 Buy Now │
└────────────────────────────┘
Text layers work closely with Auto Layout. A text layer can be placed inside an Auto Layout frame so that surrounding elements respond to changes in the text content.
Auto Layout Frame
↓
Text Layer
↓
Content Changes
↓
Text Size Changes
↓
Container Responds
↓
Layout Remains Organized
Button Before:
┌─────────────┐
│ Learn More │
└─────────────┘
Button After:
┌─────────────────────┐
│ Learn More About Us │
└─────────────────────┘
Auto Layout can be especially useful for buttons, cards, menus, tags, and responsive content blocks.
Text content can change in length depending on language, device, user information, or product requirements. Designers should therefore choose appropriate text resizing behavior and test different content lengths.
Desktop
┌──────────────────────────────┐
│ Welcome to Our Platform │
└──────────────────────────────┘
Mobile
┌──────────────────┐
│ Welcome to Our │
│ Platform │
└──────────────────┘
Long text can create layout problems when the text box is too small or when the chosen resizing behavior does not match the content.
Figma supports editing multiple selected text layers together. This can be useful when the same content or formatting needs to be updated across several text layers.
Select Multiple Text Layers
↓
Multi-edit Text
↓
Change Content
↓
Apply Changes
↓
Multiple Text Layers Updated
UI designs may need to support multiple languages. Different languages can produce different text lengths, line breaks, and typographic requirements.
Figma supports multilingual text workflows, including right-to-left text and fonts for languages such as Chinese, Japanese, and Korean.
Typography should be designed with readability and accessibility in mind. Text should have sufficient visual distinction from its background, appropriate sizing, and a clear hierarchy.
Using inconsistent font versions can cause text to reformat or display differently. When multiple designers work on the same project, teams should use consistent font files and versions where possible.
Design Team
↓
Same Font Family
↓
Same Font Version
↓
Consistent Typography
↓
Reliable Design Output
Text layers can be used inside components to create reusable UI elements such as buttons, cards, navigation items, form fields, and badges.
Component
↓
Frame
↓
Icon + Text
↓
Auto Layout
↓
Reusable UI Element
Welcome to Our Platform
------------------------
Large Heading
Bold Weight
Clear Visual Hierarchy
Create Frame
↓
Apply Auto Layout
↓
Add Text Layer
↓
Type "Get Started"
↓
Set Font
↓
Set Weight
↓
Set Padding
↓
Apply Fill
↓
Create Component
This workflow creates a reusable button where the container can respond to different label lengths.
Login
↓
Email Address
[ Enter email ]
Password
[ Enter password ]
[ Log In ]
Forgot Password?
Dashboard
──────────────
Good Morning!
Total Revenue
₹8,45,000
Orders
3,240
Users
12,450
Recent Activity
──────────────
The Text Tool can be used to establish hierarchy between dashboard titles, statistics, labels, and supporting information.
┌─────────────────────────────┐
│ Product Image │
│ │
│ Wireless Headphones │
│ Premium audio experience │
│ │
│ ₹2,499 [Buy Now] │
└─────────────────────────────┘
Each textual element can be given an appropriate font size, weight, line height, and spacing to create a clear hierarchy.
Understand Content
↓
Create Text Layer
↓
Choose Font Family
↓
Set Font Weight
↓
Set Font Size
↓
Set Line Height
↓
Set Letter Spacing
↓
Set Alignment
↓
Choose Text Resizing
↓
Create Text Style
↓
Place Inside Layout
↓
Check Responsive Behavior
↓
Check Accessibility
↓
Create Component
↓
Review Final Design
A professional design system should define typography rules so that designers can create consistent interfaces. Typography tokens or text styles can establish predictable relationships between display text, headings, body text, labels, and captions.
| Typography Level | Example | Purpose |
|---|---|---|
| Display | Hero Heading | Strong visual statement |
| Heading 1 | Page Title | Main page hierarchy |
| Heading 2 | Section Title | Section hierarchy |
| Body | Description | Main information |
| Label | Form Label | Interface identification |
| Caption | Metadata | Secondary information |
| Feature | Text Tool | Shape Tool |
|---|---|---|
| Main Purpose | Create text layers | Create geometric objects |
| Shortcut | T | Depends on selected shape |
| Content | Characters and words | Vector geometry |
| Typography | Yes | No |
| Common Use | Headings, labels, paragraphs | Cards, buttons, backgrounds, icons |
| Feature | Text Tool | Pen Tool |
|---|---|---|
| Main Purpose | Create textual content | Create custom vector paths |
| Shortcut | T | P |
| Primary Output | Text Layer | Vector Layer |
| Common Use | Typography and UI content | Icons, curves, illustrations |
| Editing | Text and typography properties | Anchor points and vector paths |
| Feature | Text Tool | Frame Tool |
|---|---|---|
| Main Purpose | Create text content | Create containers and layouts |
| Output | Text layer | Frame |
| Typography | Primary function | Contains and organizes text |
| Auto Layout | Can participate in Auto Layout | Can use Auto Layout directly |
| Common Use | Headings and content | Screens, cards, sections, components |
A structured practice routine can help beginners become comfortable with the Text Tool and typography controls.
Level 1
Create Basic Text
↓
Level 2
Change Font and Size
↓
Level 3
Control Weight and Alignment
↓
Level 4
Practice Line Height and Spacing
↓
Level 5
Create Text Styles
↓
Level 6
Build UI Components
↓
Level 7
Create Typography System
↓
Level 8
Create Responsive Typography
The Text Tool is used to create and edit text layers for headings, paragraphs, labels, buttons, navigation, forms, and other textual content.
The shortcut for the Text Tool is T.
Select the Text Tool and click on the canvas, or click and drag to create a text box.
Clicking creates an automatically resizing text layer, while click-dragging creates a text layer with defined dimensions.
Auto Width allows a text layer to expand horizontally as content is added.
Fixed Size text uses controlled dimensions and allows content to wrap within the defined text area.
Line height controls the vertical spacing between lines of text.
Letter spacing controls the horizontal space between characters.
Text styles are reusable collections of typography properties that help maintain consistent text formatting across a design.
Text styles reduce repetitive formatting and help maintain typography consistency across screens and components.
Yes. Figma supports creating text that follows vector paths, which is useful for curved and circular typography.
Yes. Hyperlinks can be added to text during text editing.
Auto Layout helps components respond more reliably when text content or text length changes.
Typography hierarchy is the visual organization of text based on importance, such as display text, headings, body text, labels, and captions.
Designers should consider readability, brand identity, hierarchy, platform requirements, language support, and consistency with the overall design system.
The Text Tool is one of the most important tools in Figma because text is present in almost every website, mobile application, dashboard, design system, and digital product. It provides designers with the ability to create and manage headings, paragraphs, labels, buttons, navigation items, forms, links, lists, and other textual elements.
To use the Text Tool professionally, designers should understand font family, font weight, font size, line height, letter spacing, paragraph spacing, alignment, text resizing, text styles, OpenType features, variable fonts, text on paths, Auto Layout, responsive typography, and accessibility considerations.
A strong workflow starts with creating clean text layers, choosing appropriate typography, establishing hierarchy, creating reusable text styles, testing different content lengths, and integrating text into responsive components. Consistent typography makes interfaces easier to understand, maintain, and scale across screens and products.
For structured Figma and UI/UX learning, visit JustAcademy Figma Training and register for a course demonstration through Register for Figma Course Demo.
